<template>
  <el-dialog
    v-el-drag-dialog="{resize: resizeChart, updataFull, updataDialogWidth}"
    :fullscreen="isfullscreen"
    :width="setDialogWidth('1200px')"
    :visible="visible"
    :title="this.$t('TREND_CONTRAST')"
    :append-to-body="true"
    @open="open"
    @close="close"
  >
    <line-chart
      id="record-line"
      ref="recordLine"
      v-loading.fullscreen.lock="loading"
      class="flex-1 mb-10"
      style="height: 300px;"
      :row-list="rowList"
      :trendshadow="false"
      @legendselectchanged="legendselectchanged"
    />
    <event-table :row-list="rowList" page-name="trendContrast" :legend-select="legendSelect" />
    <template v-slot:footer>
      <el-button @click="close">{{ $t('CLOSE') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import otdrTestResult from '@/api/oen/OtdrTestResult'
  import LineChart from './chart/LineChart'
  import EventTable from './EventTable'
  import { changeDecimal } from '@/utils/common'

  export default {
    components: { LineChart, EventTable },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      contrastData: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        rowList: [],
        legendSelect: {},
        loading: false
      }
    },
    methods: {
      resizeChart() {
        this.$refs.recordLine && this.$refs.recordLine.resize()
      },
      open() {
        this.loading = true
        Promise.all(
          this.contrastData.map(i => otdrTestResult.queryOne({
            taskId: i.taskId
          }))
        ).then(result => {
          this.rowList = result.map((j, index) => {
            const itemData = []
            // 图表数据
            j.dataList && j.dataList.forEach((e, i) => {
              if (i * Number(j.samplePrecision) < Number(j.testParam.testRange)) {
                itemData.push({
                  value: [changeDecimal(i * j.samplePrecision, 2), e]
                })
              }
            })
            const eventList = j.eventList ? [...j.eventList] : []
            eventList.forEach(i => {
              i.index = index
              i.portName = this.contrastData[index].orderIndex + '_' + (j.deviceName || j.deviceId)
              this.legendSelect[i.portName] = true
            })
            return {
              ...j,
              orderIndex: this.contrastData[index].orderIndex,
              dataList: itemData,
              eventList: eventList
            }
          })
          const _this = this
          setTimeout(() => {
            _this.$refs.recordLine.render()
            _this.loading = false
          }, 100)
        }).catch(err => {
          console.log(err)
        })
      },
      legendselectchanged(data) {
        this.legendSelect = data
      },
      close(load) {
        this.$emit('close')
      }
    }
  }
</script>

<style lang="scss">
@import 'src/assets/css/mixin.module';
.test-message {
  border: 1px solid #ebeef5;
  @include themeify {
    border: 1px solid themed('borderColor');
  }

  .flex span {
    margin-top: 10px;
    width: 50%;
  }
}
</style>
